<template>
	<view class="container">
		<uv-sticky :offset-top="0" z-index="99">
			<view class="tab" :style="{marginTop: $wanlshop.wanlsys().height + 'px'}">
				<uv-tabs :list="tabList" :current="currentItem" @click="changeTab" lineColor="#fe6600"
					:scrollable="false"></uv-tabs>
			</view>
		</uv-sticky>
		<!-- 导航条 -->
		<view class="cu-custom">
			<view class="cu-bar fixed bg-bgcolor" :style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px',
					backgroundColor: common.appStyle.cart_nav_color ? common.appStyle.cart_nav_color : '#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
					color: common.appStyle.cart_font_color == 'light' ? '#ffffff' : '#333333'
				}">
				<view class="action" @tap="operate()">
					<text v-if="cart.operate">完成</text>
					<text v-else>管理</text>
				</view>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					购物车
					<text class="text-sm">（共{{ cart.cartnum }}件宝贝）</text>
				</view>
			</view>
		</view>
		<block v-if="cart.list.length > 0">
			<view v-for="(item, index) in cart.list" :key="index">
				<!-- 店铺选择 -->
				<!-- <view class="shop margin-bottom" @tap="onShop(item.shop_id)">
					<view class="text-xxl margin-right-sm" @tap.stop="shopchoose(item)">
						<text v-if="item.check" class="wlIcon-xuanze-danxuan wanl-orange"></text>
						<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
					</view>
					<view class="shopname">
						<text class="wlIcon-dianpu1 margin-right-xs"></text>
						<text class="text-30">{{ item.shop_name }}</text>
					</view>
					<view class="info"><text class="wlIcon-fanhui2 margin-left-xs"></text></view>
				</view> -->
				<view class="wanl-cart-shop radius-bock margin-bj padding-bj" v-for="(goods, keys) in item.products"
					:key="keys">
					<view class="wanl-cart-goods">
						<!-- 商品选择 -->
						<view class="text-xxl margin-right-sm" @tap="choose({ index: index, keys: keys })">
							<text v-if="goods.checked" class="wlIcon-xuanze-danxuan wanl-orange"></text>
							<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
						</view>
						<view class="picture" @tap="onGoods(goods.goods_id)">
							<image :src="$wanlshop.oss(goods.image, 100, 100, 1)" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="text-cut-2 wanl-gray-dark" @tap="onGoods(goods.goods_id)">
								<image v-if="goods.is_hot" :src="$wanlshop.appurl('/assets/img/fire.png')" class="hot-icon"></image>
								{{ goods.title }}
							</view>
							<view class="tags">
								<view class="tags-item">
									品牌：{{ goods.brand_name }}
								</view>
								<!-- <view class="tags-item">
									型号：{{ goods.model }}
								</view> -->
							</view>
							<view class="flex justify-between align-center">
								<view class="text-price wanl-orange text-lg">
									{{ goods.sku.price }}
								</view>
								<view class="wanl-numberBox solid">
									<view @tap="bcsub(goods)">
										<text class="wlIcon-jian round text-gray"></text>
									</view>
									<uv-input type="number" border="none" :value="goods.number" inputAlign="center"
										maxlength="4" @change="(e) => numberChange(goods, e)"></uv-input>
									<view @tap="bcadd(goods)">
										<text class="wlIcon-tianjia round"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-show="currentStr == 'verified'">
						<uv-line margin="30rpx 0rpx"></uv-line>
						<view class="verify">
							<text class="verify-label">核实信息：</text>
							<view style="display: flex;flex-direction: column;">
								<view class="verify-info">
									<view class="verify-image">
										<uv-image :src="goods.feedback_image" :lazy-load="true" width="100rpx"
											height="100rpx" radius="5px"></uv-image>
									</view>
									<view class="verify-remark">
										<text>数量：{{goods.feedback_number}} 件</text>
										<!-- <text>备注：{{goods.feedback_memo || ''}}</text> -->
										<view style="display: flex;">
											<text>备注：</text>
											<uv-text mode="text" :text="goods.feedback_memo" color="#7a7a7a" lines="2"
												size="12"></uv-text>
										</view>
									</view>
								</view>
								<view class="verify-time">
									<text>核实倒计时：</text>
									<view :customStyle="{color: red}">
										<uv-count-down :time="getExptime(goods.expired_time)"
											format="HH:mm:ss"></uv-count-down>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block class="margin-bj padding-bj" v-else>
			<wanl-empty src="cart_default3x" text="哎呀，购物车空空如也！" />
			<!-- <wanl-product :dataList="likeData" /> -->
		</block>
		<!-- <uni-load-more :status="status" :content-text="contentText" /> -->
		<!-- #ifdef APP-PLUS -->
		<view style="height: 100rpx;"></view>
		<!-- #endif -->
		<view class="safeAreaBottom"></view>
		<!-- 操作栏 -->
		<view class="wanl-cart-foot fixedView solid-top edit" v-if="cart.operate">
			<view class="flex align-center" @tap="toCartchoose()">
				<view class="text-xxl">
					<text v-if="cart.status" class="wlIcon-xuanze-danxuan wanl-orange"></text>
					<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
				</view>
				<view class="margin-left-sm">
					<text>{{ cart.status ? '取消' : '全选' }}</text>
				</view>
			</view>
			<view class="flex">
				<button v-if="cart.allnum == 0" class="cu-btn round line-gray">移动关注</button>
				<button v-else class="cu-btn round line-orange" @tap="move()">移动关注</button>
				<button class="cu-btn round line-orange" @tap="toEmpty()">快速清理</button>
				<button v-if="cart.allnum == 0" class="cu-btn round line-gray">删除</button>
				<button v-else class="cu-btn round bg-gradual-orange" @tap="del()">删除</button>
			</view>
		</view>
		<view class="wanl-cart-foot fixedView solid-top account" v-else>
			<view class="flex align-center" @tap="toCartchoose()">
				<view class="text-xxl">
					<text v-if="cart.status" class="wlIcon-xuanze-danxuan wanl-orange"></text>
					<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
				</view>
				<view class="margin-left-sm">
					<text>{{ cart.status ? '取消' : '全选' }}</text>
				</view>
			</view>
			<view class="flex" v-show="currentStr == 'wait_commit'">
				<view class="text-sm text-right">
					<uv-input placeholder="请输入备注内容" border="bottom" v-model="verify_memo" fontSize="26rpx"></uv-input>
				</view>
				<button v-if="cart.allnum == 0" class="cu-btn round line-gray">核实</button>
				<button v-else class="cu-btn round bg-gradual-orange" @tap="submitVerify()">
					核实 ({{ cart.allnum }})
				</button>
			</view>
			<view class="flex" v-show="currentStr == 'pending'">
				<view class="text-sm text-right">
					<view>
						合计：
						<text class="text-price wanl-orange text-lg">{{ cart.allsum }}</text>
					</view>
					<view>不含运费</view>
				</view>
			</view>
			<view class="flex" v-show="currentStr == 'verified'">
				<view class="text-sm text-right">
					<view>
						合计：
						<text class="text-price wanl-orange text-lg">{{ cart.allsum }}</text>
					</view>
					<view>不含运费</view>
				</view>
				<button v-if="cart.allnum == 0" class="cu-btn round line-gray">去结算</button>
				<button v-else class="cu-btn round bg-gradual-orange" @tap="settlement()">
					去结算 ({{ cart.allnum }})
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				tabList: [{
					name: '待提交',
				}, {
					name: '待核实'
				}, {
					name: '已核实'
				}, {
					name: '已失效'
				}],
				currentItem: 0,
				currentStr: "wait_commit",
				reload: true,
				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载...',
					contentnomore: ''
				},
				verify_memo: "",
			};
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadlikeData();
			}
		},
		computed: {
			...mapState(['cart', 'common'])
		},
		onShow() {
			// 保存到缓存
			uni.setStorageSync("wanlshop:verify_status", this.currentStr);
			this.$store.dispatch('cart/get');
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: this.$store.state.common.appStyle.cart_font_color == 'light' ?
						'#ffffff' : '#000000',
					backgroundColor: this.$store.state.common.appStyle.cart_nav_color
				});
			}, 200);
		},
		onLoad() {
			// 加载猜你喜欢
			// this.loadlikeData();
		},
		methods: {
			changeTab(item) {
				this.currentItem = item.index;
				// 设置状态值
				this.currentStr = ["wait_commit", "pending", "verified", "expired"][item.index];
				// 保存到缓存
				uni.setStorageSync("wanlshop:verify_status", this.currentStr);
				// 触发购物车数据更新
				this.$store.dispatch('cart/get');
			},
			getExptime(time) {
				const timestamp = new Date().getTime();
				return time * 1000 - timestamp;
			},

			...mapActions({
				operate: 'cart/operate', // 管理购物车
				choose: 'cart/choose', // 选择商品
				shopchoose: 'cart/shopchoose', // 选择店铺
				bcadd: 'cart/bcadd', // 添加数量
				bcsub: 'cart/bcsub', // 减少数量
				bcset: 'cart/bcset', // 直接填写数量
				move: 'cart/move', // 移动购物车
				settlement: 'cart/settlement', // 结算购物车
				del: 'cart/del' // 删除选中购物车
			}),

			numberChange(goods, value) {
				let num = parseInt(value);

				if (isNaN(num) || num < 1) {
					num = 1;
					this.$wanlshop.msg('数量不能小于1');
				}

				if (goods.sku && goods.sku.stock && num > goods.sku.stock) {
					num = goods.sku.stock;
					this.$wanlshop.msg('数量不能超过库存');
				}
				this.bcset({
					goods: goods,
					number: num
				});
			},

			async loadlikeData() {
				await uni.request({
					url: '/wanlshop/product/likes?pages=cart',
					data: {
						page: this.current_page
					},
					success: res => {
						this.likeData = this.reload ? res.data.data : this.likeData.concat(res.data
							.data); //评论数据 追加
						let user = uni.getStorageSync('wanlshop:user');
						if (user == '' || user.verify_status !== 'success') {
							this.likeData = this.likeData.map(item => {
								return {
									...item,
									price: '认证后查看',
								};
							});
						};
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = 'more';
					}
				});
			},
			// 禁止空购物车点击全选
			toCartchoose() {
				if (this.$store.state.cart.list.length == 0) {
					uni.showModal({
						content: '购物车没有任何宝贝，马上去选一个心仪的宝贝吧~',
						success: res => {
							if (res.confirm) {
								this.$wanlshop.on('/pages/category');
							}
						}
					});
				} else {
					this.$store.dispatch('cart/cartchoose');
				}
			},
			toEmpty() {
				uni.showModal({
					content: '确定清空购物车？',
					success: res => {
						if (res.confirm) {
							this.$store.dispatch('cart/empty');
						}
					}
				});
			},

			async submitVerify() {
				let ids = [];
				// 遍历购物车项
				this.$store.state.cart.list.forEach(item => {
					// 遍历每个购物车项里的商品
					item.products.forEach(product => {
						if (product.checked) {
							ids.push(product.cart_id);
						}
					});
				});
				let idsStr = ids.join(",");

				uni.showLoading({
					title: "加载中..."
				})
				// 请求数据
				await uni.request({
					url: '/wanlshop.cart/submitVerify',
					method: "POST",
					data: {
						cartIdList: idsStr,
						verifyMemo: this.verify_memo,
					},
					success: res => {
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
						this.verify_memo = '';
						setTimeout(() => {
							if (res.data.length == 0) {
								this.changeTab({
									index: 1
								});
							} else if (res.data.length > 0) {
								this.changeTab({
									index: 2
								});
							}
						}, 1500);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.tab {
		height: 100rpx;
		background: #F7F7F7;
	}

	.wanl-gray-light {
		color: #eee;
	}

	.wanl-cart-shop {
		background-color: #ffffff;
	}

	/* #ifndef MP-ALIPAY */
	.wanl-cart-shop radio::before,
	.wanl-cart-shop checkbox::before {
		margin-top: -7px;
		right: 1px;
	}

	.wanl-cart-shop radio .wx-radio-input,
	.wanl-cart-shop checkbox .wx-checkbox-input,
	.wanl-cart-shop radio .uni-radio-input,
	.wanl-cart-shop checkbox .uni-checkbox-input {
		margin: 0;
		width: 16px;
		height: 16px;
	}

	/* #endif */
	.wanl-cart-shop checkbox-group {
		margin-right: 25rpx;
	}

	.wanl-cart-shop .shop {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wanl-cart-shop .shop .shopname {
		position: absolute;
		display: flex;
		align-items: center;
		left: 60rpx;
	}

	.wanl-cart-shop .shop uni-checkbox .uni-checkbox-input {
		border: 1px solid #cccccc;
	}

	/* 商品 */
	.wanl-cart-goods {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.wanl-cart-goods:last-child {
		margin-bottom: 18rpx;
	}

	.wanl-cart-goods .picture {
		width: 180rpx;
		height: 180rpx;
	}

	.wanl-cart-goods .picture image {
		width: 160rpx;
		height: 160rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	/* 1.0.6升级 */
	.wanl-cart-goods .content {
		padding-left: 30rpx;
		width: 100%;
		overflow: hidden;
	}

	.wanl-cart-goods .content .opt {
		font-size: 24rpx;
		padding: 0;
		color: #000000;
		height: 32rpx;
		background-color: #f6f6f6;
		font-weight: 300;
		margin-top: 10rpx;
		margin-bottom: 25rpx;
		border-radius: 4rpx;
	}

	.wanl-cart-goods .content .opt text {
		padding-right: 6rpx;
		padding-left: 10rpx;
	}

	/* 操作条 */
	.wanl-cart-foot {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 997;
		min-height: 52px;
		background-color: #ffffff;
		padding: 0 25rpx;
	}

	.wanl-cart-foot.solid:after {}

	/* #ifndef MP-ALIPAY */
	.wanl-cart-foot radio:before,
	.wanl-cart-foot checkbox:before {
		margin-top: -7px;
		right: 1px;
	}

	.wanl-cart-foot radio .wx-radio-input,
	.wanl-cart-foot checkbox .wx-checkbox-input,
	.wanl-cart-foot radio .uni-radio-input,
	.wanl-cart-foot checkbox .uni-checkbox-input {
		margin: 0;
		width: 16px;
		height: 16px;
	}

	/* #endif */
	.wanl-cart-foot.account button {
		margin-left: 25rpx;
	}

	.wanl-cart-foot.edit button {
		margin-left: 20rpx;
	}

	.wanl-cart-foot.account .cu-btn {
		padding: 0 25rpx;
		font-size: 32rpx;
		height: 72rpx;
		margin-top: 6rpx;
		/* border-radius: 20rpx; */
	}

	.wanl-cart-foot.edit .cu-btn {
		padding: 0 30rpx;
		font-size: 24rpx;
		height: 56rpx;
	}

	.verify {
		display: flex;
		margin-left: 64rpx;
	}

	.verify .verify-label {
		width: 144rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 6px;
		min-width: 144rpx;
	}

	.verify .verify-info {
		display: flex;
		margin-left: 20rpx;
		font-size: 26rpx;
		color: #7a7a7a;
		line-height: 40rpx;
	}

	.verify .verify-info .verify-remark {
		display: flex;
		flex-direction: column;
		margin-left: 24rpx;
		font-size: 24rpx;
	}

	.verify-time {
		display: flex;
		align-items: center;
		margin: 10rpx 0rpx 0rpx 20rpx;
	}

	.verify-time text {
		font-size: 26rpx;
	}

	.tags {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin: 12rpx 0rpx;

		.tags-item {
			font-size: 24rpx;
			padding: 4rpx 6rpx;
			margin-bottom: 4rpx;
			color: #000000;
			background-color: #f6f6f6;
			font-weight: 300;
			border-radius: 4rpx;
		}
	}

	.uv-count-down {
		text {
			color: red !important;
			font-size: 26rpx !important;
		}
	}

	.number-input {
		text-align: center;
	}
	.hot-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}
</style>